iT邦幫忙

2024 iThome 鐵人賽

DAY 26
0
JavaScript

入門JavaScript系列 第 26

JavaScript與事件處理(1)

  • 分享至 

  • xImage
  •  

JavaScript 的事件處理是網頁應用程序交互的核心之一,它使得用戶能夠通過點擊、鍵盤輸入、滑動等操作與網頁互動。事件處理為開發者提供了監聽和響應用戶操作的能力,使頁面更加動態和反應靈敏。

1. 什麼是事件?

在 JavaScript 中,"事件" 是用來描述用戶或瀏覽器執行的某種行為的對象。常見的事件包括:

  • 滑鼠事件click(點擊)、dblclick(雙擊)、mouseover(滑鼠懸停)、mouseout(滑鼠移出)
  • 鍵盤事件keydown(按下鍵盤按鍵)、keyup(釋放鍵盤按鍵)、keypress(按下字符鍵)
  • 表單事件submit(提交表單)、change(表單值改變)
  • 瀏覽器事件load(頁面加載完成)、resize(窗口大小改變)、scroll(滾動條移動)

每一個事件都可以被綁定到一個或多個 DOM 元素,當事件發生時,JavaScript 會執行相應的處理函式。

2. 事件監聽與處理

JavaScript 使用「事件監聽器」(Event Listener)來監聽特定事件,並指定當事件發生時要執行的回調函數(處理程序)。

範例:簡單的事件處理

<button id="myButton">Click Me</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', function() {
    alert('Button clicked!');
  });
</script>

在這個例子中,當用戶點擊按鈕時,click 事件會被觸發,並且會執行一個彈出訊息框的函數。addEventListener 是最常用來綁定事件的方法。

事件綁定方式

事件綁定有幾種不同的方法:

  1. addEventListener():現代且推薦使用的方法,因為它允許同一元素上綁定多個事件處理程序,並且支持移除監聽器。
  2. HTML 屬性事件處理器:例如 <button onclick="alert('clicked!')">,這種方式容易在 HTML 和 JavaScript 之間混淆代碼。
  3. 事件處理器屬性:例如 element.onclick = function() {...};,這樣只允許綁定一個處理程序。

3. 事件對象(Event Object)

每當事件發生時,JavaScript 都會創建一個事件對象,並傳遞給處理程序。這個對象包含了事件的相關信息,如事件類型、觸發事件的元素,以及滑鼠座標或按下的鍵等。

範例:使用事件對象

<button id="myButton">Click Me</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', function(event) {
    console.log(event);  // 打印事件對象
    console.log('Button ID:', event.target.id);  // 觸發事件的元素
  });
</script>

這裡的 event 對象包含了點擊事件的所有細節,event.target 是事件發生的元素,可以用來獲取按鈕的 ID 或其他屬性。

4. 事件傳遞與冒泡機制

在 HTML 結構中,事件從觸發它的元素開始,會向父級元素傳遞,這稱為「事件冒泡」(Event Bubbling)。也就是說,如果一個元素觸發了事件,該事件會沿著 DOM 樹向上冒泡到根元素。

範例:事件冒泡

<div id="parentDiv">
  <button id="childButton">Click Me</button>
</div>

<script>
  const parentDiv = document.getElementById('parentDiv');
  const childButton = document.getElementById('childButton');

  parentDiv.addEventListener('click', function() {
    console.log('Parent clicked!');
  });

  childButton.addEventListener('click', function(event) {
    console.log('Button clicked!');
    event.stopPropagation();  // 阻止事件冒泡
  });
</script>

在這個例子中,點擊按鈕後,按理說父級元素的事件也會被觸發,但 event.stopPropagation() 阻止了事件從按鈕冒泡到父元素,因此只會打印 "Button clicked!"。

5. 事件委派(Event Delegation)

事件委派是一種優化技術,它允許開發者將事件處理程序綁定到父元素,從而處理多個子元素的事件。這對於動態添加元素或有大量子元素的情況特別有用。

範例:使用事件委派

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const myList = document.getElementById('myList');

  myList.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      alert(event.target.textContent + ' clicked!');
    }
  });
</script>

在這個例子中,點擊 ul 中的任意 li 元素都會觸發 click 事件處理程序,因為事件是綁定在父元素 ul 上的,這就是事件委派。這種技術可以提高性能,尤其是當有大量動態元素時。

6. 預設行為與 preventDefault()

某些 HTML 元素有自己的預設行為,例如 <a> 標籤的超連結跳轉,或表單的提交。使用 event.preventDefault() 可以阻止這些預設行為。

範例:阻止表單提交的預設行為

<form id="myForm">
  <input type="text" placeholder="Enter something">
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function(event) {
    event.preventDefault();  // 阻止表單提交
    alert('Form submission prevented!');
  });
</script>

在這個範例中,點擊提交按鈕不會刷新頁面,因為 preventDefault() 阻止了表單的預設提交行為。

7. 事件處理的最佳實踐

  • 避免內聯事件處理器:使用內聯事件會讓 HTML 和 JavaScript 代碼混雜在一起,降低代碼可讀性和維護性。
  • 使用事件委派:當需要監聽大量子元素時,使用事件委派可以提高性能。
  • 事件冒泡與捕獲:理解事件的冒泡和捕獲機制,根據需要適當使用 stopPropagation()preventDefault()

總結

JavaScript 的事件處理機制是網頁動態交互的基礎,透過事件監聽器、事件委派、阻止預設行為等技術,可以靈活地處理使用者的操作,打造流暢的用戶體驗。熟練掌握這些技巧,可以讓網頁應用更具互動性和可用性。


上一篇
JavaScript與CSS(2)
下一篇
JavaScript與事件處理(2)
系列文
入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言